<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script type="text/javascript" th:src="@{/pc/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/pc/js/opertation/addCommunity.js}"></script>
    <link rel="stylesheet" th:href="@{/pc/layui/css/layui.css}"/>

    <style type="text/css">
        #allmap{height:600px;width:100%;}
        #result{height: 520px;overflow: hidden;overflow-y: scroll;}
        .card{border:solid 1px #e47214;margin: 0 20px 0 20px;padding: 10px;}
    </style>
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
    <legend>添加物业信息</legend>
</fieldset>

<div style="padding:20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md7">
            <div class="layui-card">
                <div class="layui-card-body">

                    <!-- 搜索小区 -->
                    <div id="search">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">搜索小区</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="com" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="s()">搜索</button>
                            </div>
                        </div>
                        <div id="result"></div>
                    </div>
                    <!-- 填写资料 -->
                    <form class="layui-form" id="info" style="display: none;">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">输入小区</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="comName" id="community" lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入小区名字">
                                </div>
                                <div class="layui-form-mid" style="color: #FF5722;">请确认地图位置</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">小区地址</label>
                            <div class="layui-input-inline">
                                <select name="comProvince" id="selProvince" lay-filter="ck" lay-verify="required"></select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="comCity" id="selCity" lay-verify="required"></select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"> </label>
                            <div class="layui-input-block">
                                <input type="text" name="comAddress" id="address" autocomplete="off" placeholder="输入详细地址" class="layui-input" style="width:60%">
                            </div>
                        </div>
                        <input id="lng" name="comLongitude" hidden="true">
                        <input id="lat" name="comLatitude" hidden="true">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="sub" >立即提交</button>
                                <button  type="reset" onclick="c()" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="layui-card" style="height: 100%">
                    <div id="allmap"></div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="http://api.map.baidu.com/api?v=3.0&ak=VTjmw7L8BBqtcRuxkGAcb6z8eGyCKsV3" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/pc/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/pc/js/opertation/city.js}"></script>
<script>

    // 百度地图API功能
    var map = new BMap.Map("allmap");

    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    //搜索结果展示
    var options = {
        onSearchComplete: function(results) {
            var s = '<div class="layui-form" style="margin-right:10px;"><table class="layui-table">' +
                    '<colgroup><col width="180"><col><col width="100"><col></colgroup>' +
                    '<thead>' +
                    '<tr><th>名称</th><th>地址</th><th>操作</th></tr>' +
                    '</thead>' +
                    '<tbody>';
            if(results.getCurrentNumPois() > 0){
                // 判断状态是否正确
                if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                    for (var i = 0; i < results.getCurrentNumPois(); i++) {
                        s += '<tr><td>' + results.getPoi(i).title + '</td>' +
                             '<td>' + results.getPoi(i).address + '</td>' +
                             '<td lay-data="{align:center}"><button type="button" ' +
                            'onclick="mark(\'' + results.getPoi(i).point.lng + '\',\'' + results.getPoi(i).point.lat +
                            '\',\'' + results.getPoi(i).title + '\',\'' + results.getPoi(i).address +'\')"' +
                            ' class="layui-btn layui-btn-sm layui-btn-normal">选择</button></td></tr>';
                    }
                    s += '</tbody></table></div>';
                    $("#result").html(s);

                }
            }else {
                s = '<div class="card" style="font-size: 16px"><i class="layui-icon layui-icon-face-cry" style="font-size: 18px; color: #FF5722;"></i> 没有搜索到相关地址</div>';
                $("#result").html(s);
            }
        }
    };

    //定位设置中心地区
    var local;
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            map.centerAndZoom(r.point, 15);
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            local = new BMap.LocalSearch(map,options);
        } else {
            alert('定位失败：错误码: ' + this.getStatus());
        }
    }, {enableHighAccuracy: true});

    //点击搜索结果后的操作
    function mark(lng,lat,tittle,address) {
        map.clearOverlays();
        var point = new BMap.Point(lng,lat);    //获取第一个智能搜索的结果
        var mk = new BMap.Marker(point);
        map.centerAndZoom(point, 18);
        map.addOverlay(mk);
        map.panTo(point);
        $("#search").hide();
        $("#info").show();
        city();
        $("#community").val(tittle);
        $("#address").val(address);
        $("#lng").val(lng);
        $("#lat").val(lat);
    }

    //搜索方法
    function s() {
        local.search($("#com").val());
    }

    //关闭搜索结果面板
    function c() {
        $("#search").show();
        $("#info").hide();
    }

    layui.use('form', function(){
        var form = layui.form;
        form.on('submit(sub)', function(data){
            $.post("/sharepark/community/add",data.field,function (data) {
                if (data.indexOf("成功") > 0){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('你已成功添加小区');
                    });
                    setTimeout(function(){
                        window.parent.location.reload();
                    },1500);
                }else {
                    alert("添加失败，联系管理员")
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

</script>

</html>